<template>
	<view class="container">
		<view style='padding: 0 20rpx;'>
			<u--form :model="formModel" ref="uForm" label-width='120'>
				<u-form-item label="优惠券类型" prop="typesLabel" borderBottom rightIcon='arrow-right'
					@click='tradeShow = true'>
					<u--input v-model="formModel.typesLabel" placeholder='请输入' maxlength='11' border="none" />
				</u-form-item>
				<u-form-item label="优惠券名称" prop="name" borderBottom rightIcon='arrow-right'>
					<u--input v-model="formModel.name" placeholder='请输入,例如:洗车券、理发券' maxlength='20' border="none" />
				</u-form-item>
				<u-form-item label="立减金额" prop="money" borderBottom rightIcon='arrow-right' v-if="formModel.types=='2'">
					<u--input v-model="formModel.money" placeholder='请输入' maxlength='11' border="none" />
				</u-form-item>

				<u-form-item label="优惠券折扣" prop="money" borderBottom rightIcon='arrow-right'
					v-if="formModel.types=='3'">
					<u--input v-model="formModel.money" placeholder='请输入' maxlength='11' border="none" />
				</u-form-item>

				<u-form-item label="减免" prop="money" borderBottom rightIcon='arrow-right' v-if="formModel.types=='4'">
					<u--input v-model="formModel.money" placeholder='请输入' maxlength='11' border="none" />
				</u-form-item>
				<u-form-item label="满多少元可使用" prop="fullMoney" borderBottom rightIcon='arrow-right'
					v-if="formModel.types=='4'">
					<u--input v-model="formModel.fullMoney" placeholder='请输入' maxlength='11' border="none" />
				</u-form-item>

				<u-form-item label="发放数量" prop="count" borderBottom rightIcon='arrow-right'>
					<u--input v-model="formModel.count" placeholder='请输入' maxlength='11' border="none" type='number' />
				</u-form-item>
				<u-form-item label="最大领取数量" prop="maxCount" borderBottom rightIcon='arrow-right'>
					<u--input v-model="formModel.maxCount" placeholder='请输入' maxlength='11' border="none" />
				</u-form-item>
				<u-form-item label="优惠券内容" prop="content" borderBottom rightIcon='arrow-right' labelPosition='top'>
					<view style="margin-top: 14rpx;">
						<u--textarea fixed='true' v-model="formModel.content" type='textarea' border='surround'
							maxlength='500' height='150rpx' placeholder='例如:免费洗车一次' />
					</view>
				</u-form-item>
			</u--form>
		</view>
		<view
			style="font-size: 32rpx;font-weight: bold;border-top: 10rpx solid #eee;border-bottom: 2rpx solid #eee;padding:30rpx 20rpx;">
			优惠券适用时间</view>
		<view style='padding: 0 20rpx;'>
			<u--form :model="formModel" ref="uForm" label-width='120'>
				<u-form-item label="生效时间" prop="startTime" borderBottom rightIcon='arrow-right'
					@click='startTimeShow = true'>
					<u--input v-model="formModel.startTimeLabel" placeholder='请输入' maxlength='40' border="none" />
				</u-form-item>
				<u-form-item label="失效时间" prop="endTime" borderBottom rightIcon='arrow-right'
					@click='endTimeShow = true'>
					<u--input v-model="formModel.endTimeLabel" placeholder='请输入' maxlength='40' border="none" />
				</u-form-item>
				<u-form-item label="周几可用" prop="weeks" borderBottom rightIcon='arrow-right' @click='weeksShow = true'>
					<u--input v-model="formModel.weeksLabel" placeholder='请输入' maxlength='20' border="none" />
				</u-form-item>
				<u-form-item label="可用时间段" prop="times" borderBottom rightIcon='arrow-right' @click='timesShow = true'>
					<u--input v-model="formModel.timesLabel" placeholder='请输入' maxlength='20' border="none" />
				</u-form-item>
			</u--form>
		</view>

		<view class="footer">
			<jc-button :width="600" title='立即发布' @click='submit' backgroundColor="#DD4949"></jc-button>
			<view @click='publicRecordAction' style="margin-top: 20rpx;height: 80rpx;line-height: 80rpx;text-align: center;font-size: 30rpx;color: #999;">发布历史 ></view>
		</view>
		<u-picker :show="tradeShow" :columns="tradeColumns" keyName='label' :formatter="formatter"
			@cancel='tradeShow = false' @confirm='tradeConfirm'></u-picker>
		<u-datetime-picker :show="startTimeShow" mode="date" v-model="formModel.startTime" :minDate='minDate' :maxDate='maxDate' @cancel='startTimeShow = false' @confirm='startTimeConfirm'></u-datetime-picker>
		<u-datetime-picker :show="endTimeShow" mode="date" v-model="formModel.endTime" :minDate='minDate' :maxDate='maxDate' @cancel='endTimeShow = false' @confirm='endTimeConfirm'></u-datetime-picker>
		<u-picker :show="weeksShow" :columns="weeksColumns" keyName='label' :defaultIndex='weeksDefaultIndexs'
			@cancel='weeksShow = false' @confirm='weeksConfirm'></u-picker>
		<u-picker :show="timesShow" :columns="timesColumns" keyName='label' :defaultIndex='timesDefaultIndexs'
			@cancel='timesShow = false' @confirm='timesConfirm'></u-picker>
	</view>
</template>

<script>
	import {
		privilege
	} from '@/api/privilege.js'
	import {
		lessee
	} from '@/api/lessee.js'
	import simpleAddress from '@/components/simple-address/simple-address.vue';
	import {
		uploadFileToService
	} from '@/common/utils/uploadFile.js'
	export default {
		components: {},
		data() {
			return {
				formModel: {},
				tradeShow: false,
				tradeColumns: [
					[{
						value: '1',
						label: "兑换券"
					}, {
						value: '2',
						label: "立减券"
					}, {
						value: '3',
						label: "折扣券"
					}, {
						value: '4',
						label: "满减券"
					}]
				],
				startTimeDefaultIndexs: [],
				startTimeShow: false,
				endTimeShow: false,
				weeksShow: false,
				weeksDefaultIndexs: [],
				minDate: '',
				maxDate: '',
				weeksColumns: [
					[{
						value: '1',
						label: "周一至周日"
					}, {
						value: '2',
						label: "周一至周五"
					}, {
						value: '3',
						label: "周六至周日"
					}]
				],
				timesShow: false,
				timesColumns: [
					[{
						value: '1',
						label: "全天"
					}, {
						value: '2',
						label: "上午"
					}, {
						value: '3',
						label: "下午"
					}]
				],
				lesseeId: ''
			}
		},
		onLoad() {
			this.lesseeId = this.$Route.query.lesseeId
			// 设置默认值
			this.minDate = (new Date()).getTime()
			this.maxDate = this.$time.getDataAfterN(new Date(), 36500).getTime()
			this.formModel.startTimeLabel = this.$time.dateFormat('yyyy-mm-dd', new Date())
			this.formModel.startTime = this.$time.dateFormat('yyyy-mm-dd HH:SS:MM', new Date())
			this.formModel.endTimeLabel = this.$time.dateFormat('yyyy-mm-dd', this.$time.getDataAfterN(new Date(), 36500))
			this.formModel.endTime = this.$time.dateFormat('yyyy-mm-dd HH:SS:MM', this.$time.getDataAfterN(new Date(), 36500))
			var weeksDefaultIndex = 0
			this.weeksDefaultIndexs = [weeksDefaultIndex]
			this.formModel.weeks = this.weeksColumns[0][weeksDefaultIndex].value
			this.formModel.weeksLabel = this.weeksColumns[0][weeksDefaultIndex].label
			var timesDefaultIndex = 0
			this.timesDefaultIndexs = [timesDefaultIndex]
			this.formModel.times = this.timesColumns[0][timesDefaultIndex].value
			this.formModel.timesLabel = this.timesColumns[0][timesDefaultIndex].label
		},
		methods: {
			upload() {
				uploadFileToService().then(res => {
					if (res.code == 10000) {
						this.formModel.coverUrl = res.data.url
					}
				})
			},
			tradeConfirm(val) {
				this.tradeShow = false
				this.formModel.typesLabel = val.value[0].label
				this.formModel.types = val.value[0].value
			},
			startTimeConfirm(val) {
				console.log('val', val)
				this.startTimeShow = false
				// this.formModel.startTime = this.$time.dateFormat('yyyy-mm-dd HH:SS:MM', val.value)
				this.formModel.startTimeLabel = this.$time.dateFormat('yyyy-mm-dd', val.value)
			},
			endTimeConfirm(val) {
				this.endTimeShow = false
				// this.formModel.endTime = this.$time.dateFormat('yyyy-mm-dd HH:SS:MM', val.value)
				this.formModel.endTimeLabel = this.$time.dateFormat('yyyy-mm-dd', val.value)
			},
			weeksConfirm(val) {
				this.weeksShow = false
				this.formModel.weeksLabel = val.value[0].label
				this.formModel.weeks = val.value[0].value
			},
			timesConfirm(val) {
				this.timesShow = false
				this.formModel.timesLabel = val.value[0].label
				this.formModel.times = val.value[0].value
			},
			submit() {
				this.formModel.lessee = this.lesseeId
				if(this.formModel.startTime){
					this.formModel.startTime = this.$time.dateFormat('yyyy-mm-dd HH:SS:MM', this.formModel.startTime)
				}
				if(this.formModel.endTime){
					this.formModel.endTime = this.$time.dateFormat('yyyy-mm-dd HH:SS:MM', this.formModel.endTime)
				}
				this.formModel.status = 'public'
				privilege.createPrivilege(this.formModel).then(res => {
					if (res.data.code == 10000) {
						uni.navigateBack()
						uni.showToast({
							title: '创建成功',
							icon: 'success'
						})
					}
				})
			},
			publicRecordAction(){
				this.$Router.push({
					name: 'publicRecord',
					params: {
						lesseeId: this.lesseeId,
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
	}

	.footer {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 100rpx;
		padding-bottom: 200rpx;
	}
</style>
